<style scoped lang="scss">

</style>

<template>
  <div>
    webshop/MyComp/index
    <Child1 ref:xxx :msg=pMsg :num=pNum></Child1>
    <button @click=callChildFunction>修改父组件数据</button>
    <input v-model=mm>{{ "mm" + mm }}
    <hr>
    <input v-bind:value=mm @input="mm = $event.target.value">{{ "mm" + mm }}
    <Child2 :val=pval @changeValue="cv"></Child2>
    {{ 'pval' + pval }}
    <hr>
    <Child4 :pval=radioList v-model=checkVal :defVal=checkVal></Child4>
    <hr>
    <Child5 :val=val v-model="val"></Child5>{{val}}
  </div>
</template>

<script>
import Child1 from "@/views/webshop/MyComp/Child1.vue";
import Child2 from "@/views/webshop/MyComp/Child2.vue";
import Child4 from "@/views/webshop/MyComp/Child4.vue";
import Child5 from "@/views/webshop/MyComp/Child5.vue";

export default {
  name: "MyComp",
  components: {
    Child1: Child1,
    Child2: Child2,
    Child4: Child4,
    Child5: Child5
  },
  data() {
    return {
      val: 11,
      checkVal: [0, 1, 2],
      radioList: [{
        value: 0,
        label: '运动'
      }, {
        value: 1,
        label: '电影'
      }, {
        value: 2,
        label: '打电话'
      }],
      pMsg: '父组件信息',
      pNum: 123,
      mm: 'model测试',
      pval: '父信息'
    }
  },
    methods: {
      callChildFunction()
      {
        this.$refs.xxx.changeValue()
      }
    ,
      cv(val)
      {
        console.log('父组件函数被调用')
        this.pval = val
      }
    }
  }
</script>
